<template>
  <view 
    class="fu-slider"
    :class="{ 
      'fu-slider--disabled': disabled,
      'fu-slider--vertical': vertical 
    }"
  >
    <slider
      :value="modelValue"
      :min="min"
      :max="max"
      :step="step"
      :disabled="disabled"
      :block-size="buttonSize"
      :block-color="buttonColor"
      :background-color="inactiveColor || ''"
      :active-color="activeColor || ''"
      :show-value="showValue"
      @changing="handleChanging"
      @change="handleChange"
    />
  </view>
</template>

<script>
import { defineComponent } from 'vue'

/**
 * fu-slider 滑块组件
 * @description 滑动输入器，基于uni-app原生slider组件
 * @property {Number} modelValue - 当前值
 * @property {Number} min - 最小值
 * @property {Number} max - 最大值
 * @property {Number} step - 步长
 * @property {Boolean} disabled - 是否禁用
 * @property {Boolean} vertical - 是否垂直方向
 * @property {String} activeColor - 已选择的颜色
 * @property {String} inactiveColor - 未选择的颜色
 * @property {Number} buttonSize - 滑块大小，默认28
 * @property {String} buttonColor - 滑块颜色
 * @property {Boolean} showValue - 是否显示当前值
 * @event {Function} update:modelValue - 值变化时触发
 * @event {Function} change - 值变化时触发
 * @event {Function} changing - 拖动过程中触发
 */
export default defineComponent({
  name: 'fu-slider',
  props: {
    modelValue: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    step: {
      type: Number,
      default: 1
    },
    disabled: {
      type: Boolean,
      default: false
    },
    vertical: {
      type: Boolean,
      default: false
    },
    activeColor: {
      type: String,
      default: ''
    },
    inactiveColor: {
      type: String,
      default: ''
    },
    buttonSize: {
      type: Number,
      default: 28
    },
    buttonColor: {
      type: String,
      default: '#ffffff'
    },
    showValue: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'change', 'changing'],
  methods: {
    handleChange(event) {
      const value = event.detail.value
      this.$emit('update:modelValue', value)
      this.$emit('change', value)
    },
    handleChanging(event) {
      const value = event.detail.value
      this.$emit('update:modelValue', value)
      this.$emit('changing', value)
    }
  }
})
</script>

<style lang="scss" scoped>
.fu-slider {
  position: relative;
  width: 100%;
  padding: 0 15rpx;
  box-sizing: border-box;
  
  &--disabled {
    opacity: 0.5;
  }
  
  &--vertical {
    height: 100%;
    width: auto;
    padding: 15rpx 0;
    
    :deep(.uni-slider) {
      transform: rotate(90deg);
      transform-origin: center center;
      width: 200rpx; // 垂直模式下的宽度
      margin: 100rpx auto; // 调整位置
    }
  }
}
</style> 